// 配置获取dom元素封装函数
const qs = ele => document.querySelector(ele)
// 配置 根路径
axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

  // todo ======= 默认省市区 ========
  ; (async () => {
    // 获取省份
    const { data: { data: provinceDat } } = await axios({ url: '/city/province' })
    console.log('省份数', provinceDat)
    // 渲染数据
    const provinceStr = provinceDat.map(item => `<option value="${item.province}">${item.name}</option>`).join('')
    qs('#province').innerHTML = '<option value="">请选择省份</option>' + provinceStr
    // 设置默认省份
    qs('#province').value = '34'

    // 获取城市
    const { data: { data: cityDat } } = await axios({
      url: '/city/city',
      params: {
        provinceCode: '34'
      }
    })
    console.log('市数据', cityDat)
    // 渲染数据
    const cityStr = cityDat.map(item => `<option value="${item.city}">${item.name}</option>`).join('')
    qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
    // 设置默认市
    qs('#city').value = '01'

    // 获取区县
    const { data: { data: areaDat } } = await axios({
      url: '/city/area',
      params: {
        provinceCode: '34',
        cityCode: '01'
      }
    })
    console.log('区数据', areaDat)
    // 渲染数据
    const areaStr = areaDat.map(item => `<option value="${item.area}">${item.name}</option>`).join('')
    qs('#county').innerHTML = '<option value="">请选择城市</option>' + areaStr
    // 设置默认区
    qs('#county').value = '72'
  })()
// todo ======= 改变省份选择 对应市改变 ===========
qs('#province').addEventListener('change', function () {
  console.log('省份改变了')
    ; (async () => {
      const { data: { data: cityDat } } = await axios({
        url: '/city/city',
        params: {
          provinceCode: this.value
        }
      })
      console.log('市数据', cityDat)
      // 渲染数据
      const cityStr = cityDat.map(item => `<option value="${item.city}">${item.name}</option>`).join('')
      qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
      // 改bug
      qs('#county').innerHTML = '<option value="">请选择城市</option>'
    })()
})
// todo ======= 改变市选择 对应区改变 ===========
qs('#city').addEventListener('change', function () {
  console.log('省份改变了')
    ; (async () => {
      const { data: { data: areaDat } } = await axios({
        url: '/city/area',
        params: {
          provinceCode: qs('#province').value,
          cityCode: this.value
        }
      })
      console.log('区数据', areaDat)
      // 渲染数据
      const areaStr = areaDat.map(item => `<option value="${item.area}">${item.name}</option>`).join('')
      qs('#county').innerHTML = '<option value="">请选择城市</option>' + areaStr

    })()
})